<template>
	<view class="mask">
		<view class="flex_sbc top-box">
			<view class="flex_sbc uni-my-20 width-100">
				<view class="icon-size"></view>
				<view class="z-font-36 text-w">筛选</view>
				<navigator open-type="navigateBack" animation-type="fade-out" hover-class="none">
					<image :src="setting.oss_pub_domain + '/app-img/icon/close.png'" class="icon-size"></image>
				</navigator>
			</view>
		</view>
		<view class="content">
			<view class="text-w">当前成绩</view>
			<uni-grid :column="4" :show-border="false" :square="false">
				<uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
					<view v-if="item" class="grid-item grid-item-active">{{item}}</view>
					<view v-else class="grid-item flex_cc">
						<view class="ext-text">展开</view>
						<image :src="setting.oss_pub_domain + '/app-img/icon/ext.png'" class="ext-icon"></image>
					</view>
				</uni-grid-item>
			</uni-grid>
			<view class="text-w uni-mt-48">性别</view>
			<uni-grid :column="4" :show-border="false" :square="false" :highlight="false">
				<uni-grid-item v-for="(sex ,si) in gender" :index="si" :key="si" hover-class="none">
					<view class="grid-item grid-item-disable">{{sex}}</view>
				</uni-grid-item>
			</uni-grid>
			<view class="text-w uni-mt-48">学习状态</view>
			<uni-grid :column="4" :show-border="false" :square="false" :highlight="false">
				<uni-grid-item v-for="(state ,li) in learning_state" :index="li" :key="li">
					<view class="grid-item grid-item-disable">{{state}}</view>
				</uni-grid-item>
			</uni-grid>
			<view class="text-w uni-mt-48">分组</view>
			<uni-grid :column="4" :show-border="false" :square="false" :highlight="false">
				<uni-grid-item v-for="(item ,gi) in group" :index="gi" :key="gi">
					<view class="grid-item grid-item-disable">{{item}}</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="flex_sbc bottom-box">
			<view class="flex_fsc">
				<image :src="setting.oss_pub_domain + '/app-img/player/pe.png'" class="ext-icon"></image>
				<view class="number">1000人</view>
			</view>
			<view class="flex_fsc">
				<view class="button-comm reset uni-mr-40">重置</view>
				<view class="button-comm uni-color-main-bg uni-white">确定</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue';
	const {
		proxy: that
	} = getCurrentInstance()
	const list = ['100-108杆', '100-108杆', '100-108杆', '100-108杆', '100-108杆', '100-108杆', '100-108杆', '']
	const gender = ['男', '女']
	const learning_state = ['在训', '停训']
	const group = ['青少', '业余' , '专业']
</script>

<style lang="scss">
	page {
		background: rgba(0, 0, 0, 0.4);
	}
	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}
	.top-box {
		width: 100vw;
		box-sizing: border-box;
		padding: var(--status-bar-height) 32rpx 0;
		background: #FFFFFF;
	}
	
	.content {
		width: 100vw;
		box-sizing: border-box;
		padding: 0 32rpx;
		background: #FFFFFF;
		border-bottom: 2rpx solid #EBEDED;
		padding-bottom: 58rpx;
	}

	.grid-item {
		border-radius: 12rpx;
		text-align: center;
		width: 156rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin: 20rpx auto 0;
	}

	.grid-item-active {
		border: 2rpx solid #ACD3BE;
		background: #E6F5ED;
		color: #008965;
	}

	.grid-item-disable {
		border: 2rpx solid #E8EAED;
		color: $uni-text-color-grey;
	}
	.ext-text {
		color: #9EABC6;
	}
	.ext-icon {
		width: 32rpx;
		height: 32rpx;
		margin-left: 4rpx;
	}
	
	.bottom-box {
		width: 100vw;
		height: 128rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 0 32rpx;
	}
	
	.number {
		font-size: 32rpx;
		margin-left: 16rpx;
		color: #585C66;
	}
	
	.button-comm {
		width: 200rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		border-radius: 16rpx;
	}
	
	.reset {
		border: 2rpx solid #008965;
		color: #008965;
	}
</style>